import React, { Component } from 'react'
// import './banner.scss'
import Swiper from 'swiper'
import axios from 'axios'
import '../../../assets/swiper/swiper.min.css'
import { Route, NavLink, Switch, Redirect } from 'react-router-dom'



export default class bannerList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            bannerList: [],
        }
        this.getBannerList()
        console.log(this.state.bannerList)
    }


    componentDidUpdate() {
        var swiper = new Swiper('.bannerList', {
            slidesPerView: 2.3,
            spaceBetween: 15,
            freeMode: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
        console.log(this.state.bannerList[0].header.image)
    }

    componentDidMount() {
        // this.getBannerList()
        console.log(this.state.bannerList)
    }

    getBannerList() {
        axios.get("https://shopapi.smartisan.com/mobile/home").then((res) => {
            this.setState({
                bannerList: res.data.data.splice(2),
            })
        })
    }



    render() {
        return (
            <div className="bannerB">
                {
                    this.state.bannerList.map((item, index) => {
                        return <div className="swiper-container bannerList" key={index}>
                            <div className="back-img"> <img src={item.header.image} /></div>
                            <div className="swiper-wrapper">
                                {
                                    item.skuInfo.map((A, index) => {
                                        return <div className="swiper-slide" key={index}>
                                            <NavLink to={"/item/" + A.skuId}>
                                                <img src={A.images} />
                                                <p className="goodsName">{A.skuName}</p>
                                                <p>
                                                    <span className="left">￥<b>{A.originalPrice}</b></span>
                                                    <span className="right">{A.promotionList[0] ? A.promotionList[0].tag : ''}</span>
                                                </p>
                                                </NavLink>
                                               
                                            
                                        </div>

                                    })
                                }
                            </div>

                            {/* <!-- Add Pagination --> */}
                            {/* <div className="swiper-pagination"></div> */}
                        </div>
                    })
                }
            </div>
        )
    }
}
